<script setup>
import ProductParams from '@/components/ProductParams.vue'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Autoplay, EffectCube, EffectFade } from 'swiper/modules'

const prefix = import.meta.env.VITE_BASE_URL
const showSlide = ref('')
const product = ref('')
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const modules = [Navigation, Pagination, Autoplay, EffectCube, EffectFade]
const closeVideo = () => {
  showSlide.value = 'slideUp'
  setTimeout(() => {
    showSlide.value = ''
  }, 600)
}
const getProductInfo = () => {
  let id = route.params.id
  proxy.axios.get(`/products/10`).then(res => {
    product.value = res
  })
}
const buy = () => {
  let id = route.params.id
  router.push(`/detail/10`)
}
onMounted(() => getProductInfo())
</script>

<template>
  <div class="product">
    <product-params :title="product.name">
      <template #buy>
        <button class="btn mlbtn" @click="buy">立即购买</button>
      </template>
    </product-params>
    <div class="content">
      <div class="item-bg">
        <h2>{{ product.name }}</h2>
        <h3>{{ product.subtitle }}</h3>
        <p>
          <a href="" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="" id="">骁龙845</a>
          <span>|</span>
          <a href="" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="" id="">红外人脸识别</a>
        </p>
        <div class="price">
          <span>￥<em>{{ product.price }}</em></span>
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>
      <div class="item-swiper">
        <swiper :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 2000 }" :slides-per-view="3"
          :space-between="30">
          <swiper-slide><img v-lazy="prefix + '/imgs/product/gallery-2.png'" alt=""></swiper-slide>
          <swiper-slide><img v-lazy="prefix + '/imgs/product/gallery-3.png'" alt=""></swiper-slide>
          <swiper-slide><img v-lazy="prefix + '/imgs/product/gallery-4.png'" alt=""></swiper-slide>
          <swiper-slide><img v-lazy="prefix + '/imgs/product/gallery-5.jpg'" alt=""></swiper-slide>
          <swiper-slide><img v-lazy="prefix + '/imgs/product/gallery-6.jpg'" alt=""></swiper-slide>
        </swiper>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br />慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br />更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <div class="video-bg" @click="showSlide = 'slideDown'"></div>
        <div class="video-box" v-show="showSlide">
          <div class="overlay"></div>
          <div class="video" :class="showSlide">
            <span class="icon-close" @click="closeVideo"></span>
            <!-- video可以在页面添加视频，muted指静音播放，autoplay自动播放，controls添加默认组件 -->
            <video v-lazy="prefix + '/imgs/product/video.mp4'" muted autoplay controls="controls"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

.product {
  .content {
    .item-bg {
      background: url('/imgs/product/product-bg-1.png') no-repeat center;
      height: 718px;
      text-align: center;

      h2 {
        font-size: 80px;
        padding-top: 55px;
      }

      h3 {
        font-size: 24px;
        letter-spacing: 10px;
      }

      p {
        margin-top: 21px;
        margin-bottom: 40px;

        a {
          font-size: 16px;
          color: #333333;
        }

        span {
          margin: 0 15px;
        }
      }

      .price {
        font-size: 30px;
        color: #333333;

        em {
          font-style: normal;
          font-size: 38px;
        }
      }
    }

    .item-bg-2 {
      background: url('/imgs/product/product-bg-2.png') no-repeat center;
      height: 480px;
      background-size: 1226px 397px;
    }

    .item-bg-3 {
      background: url('/imgs/product/product-bg-3.png') no-repeat center;
      height: 638px;
      background-size: cover;
    }

    .item-swiper {
      margin: 36px auto 52px;

      .desc {
        font-size: 18px;
        color: #333333;
        text-align: center;
      }

      img {
        width: 100%;
      }
    }

    .item-video {
      height: 1044px;
      background-color: #070708;
      margin-bottom: 76px;
      color: #FFFFFF;
      text-align: center;

      h2 {
        font-size: 60px;
        padding-top: 82px;
        margin-bottom: 47px;
      }

      p {
        font-size: 24px;
        margin-bottom: 58px;
      }

      .video-bg {
        background: url('/imgs/product/gallery-1.png') no-repeat center;
        background-size: cover;
        width: 1226px;
        height: 540px;
        margin: 0 auto 120px;
        cursor: pointer;
      }

      .video-box {
        .overlay {
          @include position(fixed);
          background-color: #333333;
          opacity: .4;
          z-index: 10;
        }

        @keyframes slideDown {
          from {
            top: -50%;
            opacity: 0;
          }

          to {
            top: 50%;
            opacity: 1;
          }
        }

        @keyframes slideUp {
          from {
            top: 50%;
            opacity: 1;
          }

          to {
            top: -50%;
            opacity: 0;
          }
        }

        .video {
          position: fixed;
          top: -50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 10;
          width: 1000px;
          height: 536px;
          opacity: 1;

          &.slideDown {
            animation: slideDown .6s linear;
            top: 50%; // 渐入动画结束后要定位在top50%的地方
          }

          &.slideUp {
            animation: slideUp .6s linear;
          }

          .icon-close {
            position: absolute;
            top: 20px;
            right: 20px;
            @include bgImg(20px, 20px, '/imgs/icon-close.png');
            cursor: pointer;
            z-index: 11;
          }

          video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            outline: none;
          }
        }
      }
    }
  }

  .mlbtn {
    margin-left: 10px;
  }
}
</style>
